<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>凑单品</title>
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 凑单品样式 -->
    <link rel="stylesheet" href="./css/gsproduct.css">

</head>

<body>
    <div class="view">
        <!-- 头部 -->
        <div class="mmm-top">
            <div class="top clearfix">
                <div class="btn">
                    <span><a href="index.html"><</a></span>
                </div>
                    
                <div class="logo">
                    <h1><a>凑单品</a></h1>
                </div>

                <div class="title">
                    <p>全网比价·折扣</p>
                    <p>m.manmanbuy.com</p>
                </div>
                <div class="app-dow">
                    <a href='javascript:;'>
                        <img src="./images/header_app.png" alt="">
                    </a>
                </div>

            </div>
        </div>

        <div class="menu_bar">
            <div class="bar_left">
                <ul>
                    <li class="on list_1">
                        <a href="javascript:;">
                            <span>京东</span>
                            <i></i>
                        </a>
                    </li>
                    <li class="on list_2">
                        <a href="javascript:;">
                            <span>华北</span>
                            <i></i>
                        </a>
                    </li>
                    <li class="on list_3">
                        <a href="javascript:;">
                            <span>全部价格</span>
                            <i></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="bar_right">
                <i class="icon-search"></i>
            </div>
            <!-- 下拉 -->
            <div class="popsort popbox" id="shop">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <span>京东</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span>一号店</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span>天猫</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="popsort popbox" id="area">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <span>华北（北京，山西等）</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span>华东（山东，浙江等）</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span>华南（广东，广西等）</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span>华中（湖北，河南等）</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span>西南（四川，云南等）</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span>东北（辽宁，吉林等）</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span>西北（宁夏，新疆等）</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="popsort popbox" id="pic">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <span>全部价格</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div id="list">

        </div>

        <!-- 主体 -->
        <div class="product_list clearfix">
            <ul class="clearfix">
                <li>
                    <a href="javascript:;"></a>
                </li>
            </ul>
        </div>

        <!-- 尾部 -->
        <footer>
            <div class="foot-top">
                <a href='javascript:;'>登录</a>
                <a href='javascript:;'>注册</a>
                <a href='javascript:;' class="go-top">
                    <img src="./images/gotop.jpg" alt="">
                    返回顶部
                </a>
            </div>
            <div class="foot-bottom">
                <p>
                    <a href='javascript:;'>手机APP下载</a>
                    <a href='javascript:;'>慢慢买手机版</a>
                    <a href='javascript:;'> -- 掌上比价平台</a>
                </p>
                <p>m.manmanbuy.com</p>
            </div>
        </footer>
    </div>
</body>

</html>
<script src="./lib/zepto.js"></script>
<script src="./lib/template.js"></script>
<script src="./js/htmlFontSize.js"></script>
<script src="./js/gsproduct.js"></script>
<script src="./lib/jquery-1.12.4.js"></script>
<script>
    $('.list_1').click(function () {
        // 2.0 鼠标移入点击，添加滑动下拉展开效果
        // 4.0   动画函数前添加 stop() 停止动画队列
        $("#shop").stop().slideToggle();
    }, function () {
        // 3.0 slideUp 滑动隐藏展开效果
        $("#shop").stop().slideToggle();
    });

    $('.list_2').click(function () {
        // 2.0 鼠标移入点击，添加滑动下拉展开效果
        // 4.0   动画函数前添加 stop() 停止动画队列
        $("#area").stop().slideToggle();
    }, function () {
        // 3.0 slideUp 滑动隐藏展开效果
        $("#area").stop().slideToggle();
    });

    $('.list_3').click(function () {
        // 2.0 鼠标移入点击，添加滑动下拉展开效果
        // 4.0   动画函数前添加 stop() 停止动画队列
        $("#pic").stop().slideToggle();
    }, function () {
        // 3.0 slideUp 滑动隐藏展开效果
        $("#pic").stop().slideToggle();
    });
</script>